<template>
  <div class="container">
    <!-- 搜索模块 start -->
    <div class="searchBlock">
      <!-- 左 start -->
      <div class="left-block">
        <div class="left-block-condition">
          <span class="left_title">{{ FirstData.name }}</span>
          <el-select v-model="FirstData.type" placeholder="请选择" style="margin-top: 15px; width: 100%">
            <el-option v-for="(item, i) in requry" :key="i" :label="item.cn" :value="item.en">
            </el-option>
          </el-select>
        </div>
        <div class="left-block-select">
          <div v-for="(a, s) in FirstData.condition" :key="s" class="children_select">
            <el-popover placement="bottom" width="200" trigger="click" :ref="'FirstData_pop_' + s"
              @show="showPop('FirstData', s)">
              <div class="treePop">
                <el-tree :data="modelData" node-key="id" default-expand-all :expand-on-click-node="false"
                  :props="{ label: 'label_name' }" @node-click="treeNodeClick"></el-tree>
              </div>
              <el-input v-model="a['mod']" slot="reference" readonly placeholder="请选择模型" :style="{ width: '100px' }">
              </el-input>
            </el-popover>

            <el-select v-model="a['pre']" placeholder="属性" :style="{ width: '20%' }">
              <el-option v-for="(item, i) in FirstData.condition[s].attrlist" :key="i" :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <el-select v-model="a['cen']" placeholder="逻辑" :style="{ width: '20%' }">
              <el-option v-for="(item, i) in logicalist" :key="i" :label="item.cn" :value="item.en">
              </el-option>
            </el-select>
            <el-input v-model="a.bak" placeholder="请输入内容" :style="{ width: '35%' }"></el-input>
          </div>
        </div>
      </div>
      <!-- 左 end -->
      <!-- 中 start -->
      <div class="central_block">
        <el-select v-model="CentarlData" placeholder="请选择" style="margin-top: 30px; width: 90%">
          <el-option v-for="(item, i) in requry" :key="i" :label="item.cn" :value="item.en">
          </el-option>
        </el-select>
        <el-button type="primary" round style="margin-top: 20px" @click="searchBaner()">搜 索</el-button>
      </div>
      <!-- 中 end -->
      <!-- 右 start -->
      <div class="right-block">
        <div class="right-block-condition">
          <span class="right_title">{{ SecondData.name }}</span>
          <el-select v-model="SecondData.type" placeholder="请选择" style="margin-top: 15px; width: 100%">
            <el-option v-for="(item, i) in requry" :key="i" :label="item.cn" :value="item.en">
            </el-option>
          </el-select>
        </div>
        <div class="right-block-select">
          <div v-for="(a, s) in SecondData.condition" :key="s" class="children_select">
            <el-popover placement="bottom" width="200" trigger="click" @show="showPop('SecondData', s)"
              :ref="'SecondData_pop_' + s">
              <div class="treePop">
                <el-tree :data="modelData" node-key="id" default-expand-all :expand-on-click-node="false"
                  :props="{ label: 'label_name' }" @node-click="treeNodeClick"></el-tree>
              </div>
              <el-input v-model="a['mod']" slot="reference" readonly placeholder="请选择模型" :style="{ width: '100px' }">
              </el-input>
            </el-popover>
            <el-select v-model="a['pre']" placeholder="属性" style="width: 20%">
              <el-option v-for="(item, i) in SecondData.condition[s].attrlist" :key="i" :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <el-select v-model="a['cen']" placeholder="逻辑" style="width: 20%">
              <el-option v-for="(item, i) in logicalist" :key="i" :label="item.cn" :value="item.en">
              </el-option>
            </el-select>
            <el-input v-model="a.bak" placeholder="请输入内容" style="width: 35%"></el-input>
          </div>
        </div>
      </div>
      <!-- 右 end -->
    </div>
    <!-- 搜索模块 end -->
    <!-- 分割线 start-->
    <div class="line_border"></div>
    <!-- 分割线 end-->
    <!-- 表格 start -->
    <div class="content">
      <div class="height-100" style="position: absolute; z-index: 1200;height:100%;">
        <leftTreeSider :attrlist="attrData" ref="leftAttr" :leftAttr_status="isAttr"></leftTreeSider>
      </div>
      <!--左侧属性列表 end-->
      <g6-model class="neo4jd3" ref="g6" :paginations="paginations" @changePage="changePage" @TouchWindow="TouchWindow">
      </g6-model>
    </div>
    <!-- 表格 end -->
  </div>
</template>

<script>
  import G6Model from "../../G6Common/G6Mini";
  import leftTreeSider from "../../G6Common/leftTreeSider";
  export default {
    name: "index",
    components: {
      G6Model,
      leftTreeSider,
    },
    data: function () {
      return {
        FirstData: {
          name: "第一组",
          type: "bool_and",
          condition: [{
              mod: "",
              currentNodeId: null,
              pageIndex: 0,
              pageSize: 10,
              attrlist: [],
              pre: "",
              cen: "",
              bak: "",
            },
            {
              mod: "",
              currentNodeId: null,
              pageIndex: 0,
              pageSize: 10,
              attrlist: [],
              pre: "",
              cen: "",
              bak: "",
            },
            {
              mod: "",
              currentNodeId: null,
              pageIndex: 0,
              pageSize: 10,
              attrlist: [],
              pre: "",
              cen: "",
              bak: "",
            },
          ],
        },
        SecondData: {
          name: "第二组",
          type: "bool_and",
          condition: [{
              mod: "",
              currentNodeId: null,
              pageIndex: 0,
              pageSize: 10,
              attrlist: [],
              pre: "",
              cen: "",
              bak: "",
            },
            {
              mod: "",
              currentNodeId: null,
              pageIndex: 0,
              pageSize: 10,
              attrlist: [],
              pre: "",
              cen: "",
              bak: "",
            },
            {
              mod: "",
              currentNodeId: null,
              pageIndex: 0,
              pageSize: 10,
              attrlist: [],
              pre: "",
              cen: "",
              bak: "",
            },
          ],
        },
        requry: [{
            cn: "或者",
            en: "bool_or",
          },
          {
            cn: "并且",
            en: "bool_and",
          },
        ],
        CentarlData: "bool_and",
        logicalist: [{
            cn: "大于",
            en: "greaterThan",
          },
          {
            cn: "小于",
            en: "lessThan",
          },
          {
            cn: "大于等于",
            en: "greaterOrEqualThan",
          },
          {
            cn: "小于等于",
            en: "lessOrEqualThan",
          },
          {
            cn: "等于",
            en: "equals",
          },
          {
            cn: "详述",
            en: "specified",
          },
          {
            cn: "在...中",
            en: "in",
          },
          {
            cn: "不在...中",
            en: "notIn",
          },
          {
            cn: "不等于",
            en: "notEquals",
          },
          {
            cn: "包含",
            en: "contains",
          },
          {
            cn: "以...开始",
            en: "startWith",
          },
          {
            cn: "以...结束",
            en: "endWith",
          },
        ],
        tableData: [],
        pageSize: 25,
        pageNum: 0,
        modelData: [], //模型树
        ModelTerm: "", //模型组
        attrData: [], //属性表单
        isAttr: false, //属性表单
        paginations: {
          pageIndex: 1, // 当前位于哪页
          pageSize: 20, // 页显示多少条
          total: 0, // 总数
          layout: "total, prev, pager, next", // 翻页属性
        },
      };
    },
    mounted() {
      this.getModel(); //模型信息
      this.initData(); //视图
    },
    methods: {
      //获取模型
      getModel() {
        this.$store.dispatch("ajax", {
          url: "services/app-zonghe/api/dicLabel/tree?type.notEquals=5",
          method: "get",
          succeed: (res) => {
            this.modelData = res;
          },
        });
      },
      //弹出框出现触发 --用于模型管理树形点击事件区分
      showPop(type, index) {
        // console.log(type,index);
        this.ModelTerm = type + "_" + index;
      },
      //节点点击事件
      treeNodeClick(data) {
        console.log(data);
        let type = this.ModelTerm.split("_")[0];
        let index = this.ModelTerm.split("_")[1];
        this.loadingTeam(1, type, index);
        // console.log(type, index);
        // console.log(this[type].condition[index]);
        this.$refs[type + "_pop_" + index][0].doClose();
        this[type].condition[index]["mod"] = data.label_name;
        this[type].condition[index].currentNodeId = data.id;
        this.getUniqueAttr(type, index); //调用属性函数
      },
      //初始化组内
      loadingTeam(grade, type, index) {
        //一级 清空属性级属性列表
        if (grade == 1) {
          this[type].condition[index].currentNodeId = null;
          this[type].condition[index]["pre"] = ""; //属性
          this[type].condition[index].attrlist = [];
        }
      },
      //获取属性
      getUniqueAttr(type, index) {
        let types = type;
        let indexs = index;
        this.$store.dispatch("ajaxEx", {
          url: "services/app-zonghe/api/dicLabelProperties?label_id.equals=" +
            this[type].condition[index].currentNodeId,
          method: "get",
          data: {
            page: this[type].condition[index].pageIndex,
            size: this[type].condition[index].pageSize,
          },
          succeed: (res) => {
            console.log(res);
            // console.log(res.headers["x-total-count"]);
            this[type].condition[index].attrlist.push(...res.data);
            this[type].condition[index]["pre"] = this[type].condition[
              index
            ].attrlist[0].name;
            this[type].condition[index]["cen"] = this.logicalist[0].en;
            if (
              parseInt(res.headers["x-total-count"]) >
              this[type].condition[index].attrlist.length
            ) {
              this[type].condition[index].pageIndex++;
              this.getUniqueAttr(types, indexs);
            }
          },
        });
      },
      //初始化g6
      initData() {
        let data = {
          node: {
            where: {
              bool_and: [{
                bool_or: [{
                    bool_and: [{
                        "id.greaterThan": 0,
                      },
                      {
                        "id.greaterThan": 0,
                      },
                      {
                        "id.greaterThan": 0,
                      },
                    ],
                  },
                  {
                    bool_and: [{
                        "id.greaterThan": 0,
                      },
                      {
                        "id.greaterThan": 0,
                      },
                      {
                        "id.greaterThan": 0,
                      },
                    ],
                  },
                ],
              }, ],
            },
          },
          relationship: {
            where: {
              bool_and: [],
            },
          },
        };
        this.$store.dispatch("ajaxEx", {
          url: "services/app-zonghe/api/example/g6_dataformat/nodes_and_relationships/things" +
            "/_search?page=" +
            (this.paginations.pageIndex - 1) +
            "&size=" +
            this.paginations.pageSize,
          method: "post",
          data: data,
          succeed: (res) => {
            console.log(res);
            if (res.data.data.length == 0) {
              return;
            }
            this.$refs["g6"].loadTreeSub(res.data.data);
            //   this.againData();
          },
        });
      },
      //再次获取
      againData() {
        this.pageNum++;
        let data = {
          node: {
            where: {
              bool_and: [{
                bool_or: [{
                    bool_and: [{
                        "id.greaterThan": 0,
                      },
                      {
                        "id.greaterThan": 0,
                      },
                      {
                        "id.greaterThan": 0,
                      },
                    ],
                  },
                  {
                    bool_and: [{
                        "id.greaterThan": 0,
                      },
                      {
                        "id.greaterThan": 0,
                      },
                      {
                        "id.greaterThan": 0,
                      },
                    ],
                  },
                ],
              }, ],
            },
          },
          relationship: {
            where: {
              bool_and: [],
            },
          },
        };
        this.$store.dispatch("ajaxEx", {
          url: "services/app-zonghe/api/example/g6_dataformat/nodes_and_relationships/things" +
            "/_search?page=" +
            (this.paginations.pageIndex - 1) +
            "&size=" +
            this.paginations.pageSize,
          method: "post",
          data: data,
          succeed: (res) => {
            if (res.data.data.length == 0) {
              return;
            }
            this.$refs["g6"].againLoad(res.data.data);
            this.againData();
          },
        });
      },
      //获取表格数据
      getTableData() {
        this.$store.dispatch("ajaxEx", {
          url: "services/app-zonghe/api/example/g6_dataformat/nodes_and_relationships/things/" +
            "/_search?page=" +
            this.pageNum +
            "&size=" +
            this.pageSize,
          method: "post",
          data: {
            node: {
              where: {
                bool_and: [],
              },
            },
            relationship: {
              where: {
                bool_and: [],
              },
            },
          },
          succeed: (res) => {
            console.log("333333333333333333333", res);
            this.paginations.total = parseInt(res.headers["x-total-count"]);
          },
        });
      },
      //触发打开关闭属性表单
      TouchWindow(isShow, data) {
        // console.log(isShow, data);
        this.isAttr = isShow;
        if (isShow) {
          this.attrData = data.attrs;
        } else {
          this.attrData = [];
        }
      },
      //下一页
      changePage(type, index) {
        let pagenum = index;
        if (type == 'next') {
          pagenum = index + 1;
        } else {
          pagenum = index - 1;
        }
        this.paginations.pageIndex = pagenum;
        this.searchBaner(pagenum);
      },
      //点击搜索
      searchBaner(pagenum) {
        //处理条件格式
        //第一组条件
        if (!pagenum) {
          this.paginations.pageIndex = 1;
        }
        let Firstobj = {};
        Firstobj[this.FirstData.type] = [];
        for (let a of this.FirstData.condition) {
          if (a.pre) {
            let obj = {};
            obj[a.pre + "." + a.cen] = a.bak;
            Firstobj[this.FirstData.type].push(obj);
          }
          // else {
          //   obj["id.greaterThan"] = 0;
          // }
        }
        // console.log(Firstobj);
        //第二组条件
        let Secondobj = {};
        Secondobj[this.SecondData.type] = [];
        for (let a of this.SecondData.condition) {
          if (a.pre) {
            let obj = {};
            obj[a.pre + "." + a.cen] = a.bak;
            Secondobj[this.SecondData.type].push(obj);
          }
          // else {
          //   obj["id.greaterThan"] = 0;
          // }
        }
        // console.log(Secondobj);
        let allObj = {};
        allObj[this.CentarlData] = [];
        allObj[this.CentarlData][0] = Firstobj;
        allObj[this.CentarlData][1] = Secondobj;
        // console.log(allObj);
        let data = {
          node: {
            where: {
              bool_and: [allObj],
            },
          },
          relationship: {
            where: {
              bool_and: [],
            },
          },
        };
        this.$store.dispatch("ajaxEx", {
          url: "services/app-zonghe/api/example/g6_dataformat/nodes_and_relationships/things" +
            "/_search?page=" +
            (this.paginations.pageIndex - 1) +
            "&size=" +
            this.paginations.pageSize,
          method: "post",
          data: data,
          succeed: (res) => {
            if (res.data.data.length == 0) {
              return;
            }
            if (pagenum > 1) {
              this.$refs["g6"].oneexpand(res.data.data);
            } else {
              this.$refs["g6"].loadTreeSub(res.data.data);
            }
          },
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  /deep/ .el-select .el-input .el-select__caret {
    color: #000;
    font-weight: bold;
  }

  .treePop {
    width: 100%;
    height: 200px;
    overflow: auto;
  }

  .container {
    width: 100%;
    height: 100%;

    .searchBlock {
      width: 100%;
      height: 22%;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;

      .left-block {
        width: 45%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;

        .left-block-condition {
          width: 15%;
          height: 100%;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;

          .left_title {
            margin-top: 15px;
            font-weight: bold;
          }
        }

        .left-block-select {
          width: 90%;
          height: 100%;
          display: flex;
          flex-flow: column nowrap;

          .children_select {
            width: 100%;
            height: 30%;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-around;
            margin-top: 5px;
          }

          .children_select:nth-child(1) {
            margin-top: 10px;
          }
        }
      }

      .right-block {
        width: 45%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;

        .right-block-condition {
          width: 15%;
          height: 100%;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;

          .right_title {
            margin-top: 15px;
            font-weight: bold;
          }
        }

        .right-block-select {
          width: 90%;
          height: 100%;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          justify-content: space-around;

          .children_select {
            width: 100%;
            height: 30%;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-around;
            margin-top: 5px;
          }

          .children_select:nth-child(1) {
            margin-top: 10px;
          }
        }
      }

      .central_block {
        width: 10%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        margin-right: 10px;
      }
    }

    .line_border {
      width: 98%;
      height: 3px;
      margin: 10px auto;
      background-color: rgb(34, 32, 32);
    }

    .content {
      width: 100%;
      height: calc(75% - 23px);
      position: relative;

      .neo4jd3 {
        width: 100%;
        height: 100%;
        position: relative;
      }
    }
  }
</style>